/**
 * title: Default usage
 * desc: Please click button or outside of button to show effects.
 *
 * title.zh-CN: 基本用法
 * desc.zh-CN: 请点击按钮或按钮外查看效果。
 */

import React, { useState, useRef } from 'react';
import useClickAway from './'

export default () => {
  const [counter, setCounter] = useState(0);
  const ref: any = useRef<HTMLSpanElement>();
  useClickAway(() => {
    setCounter((s) => s + 1);
  }, ref);

  return (
    <div>
      <span ref={ref}>
        <button type="button">box1</button>
      </span>
      <p>counter: {counter}</p>
    </div>
  );
};
